<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.11.3.min.js"></script>
</head>
<style type="text/css">

    div#main { font-size: 16px; line-height: 26px; color: #fff; }
    div#main div.fancy-select { margin: 0 auto 60px; width: 200px; }
    
    </style>
<body>
    <select class="selectbox" id="" name="">
        <option value="DD博客">DD博客</option>
        <option value="CSS3">CSS3</option>
        <option value="Javascript">Javascript</option>
        <option value="Ruby">Ruby</option>
        <option value="Python">Python</option>
        <option value="C++">C++</option>
    </select>
</body>
 
<script> 
    $('.selectbox').wrap('<div class="select_wrapper"></div>')
$('.selectbox').parent().prepend('<span>' 
    + $(this).find(':selected').text() +'</span>');
$('.selectbox').parent().children('span').width($('.selectbox').width());
$('.selectbox').css('display', 'none');					
$('.selectbox').parent().append('<ul class="select_inner"></ul>');
$('.selectbox').children().each(function(){
    var opttext = $(this).text();
    var optval = $(this).val();
    $('.selectbox').parent().children('.select_inner').append('<li id="' 
    + optval + '">' + opttext + '</li>');
});
    </script> 
    <script>
        $('.selectbox').parent().find('li').on('click', function (){
    var cur = $(this).attr('id');
    $('.selectbox').parent().children('span').text($(this).text());
    $('.selectbox').children().removeAttr('selected');
    $('.selectbox').children('[value="'+cur+'"]')
        .attr('selected','selected');
    alert($('.selectbox').children('[value="'+cur+'"]').text());
    /*console.log($('.selectbox')
        .children('[value="'+cur+'"]').text());*/
});

$('.selectbox').parent().on('click', function (){
    $(this).find('ul').slideToggle('fast');
});
    </script>
    
</html>